<script>
import { formatPrice, parsePrice } from "@/modules/common/service/order";

export default {
    name:'ZkInputMoney',
    props:{
        value:{
            type: [Number, String],
            default:()=>undefined
        },
        disabled:{
            type:Boolean,
            default:false
        },
        placeholder:{
            type: String,
            default:()=>'0.00'
        },
        min:{
            type:Number,
            default:()=>0
        },
        precision:{
            type:Number,
            default:()=>2
        },
        suffix:{
            type: String|Object,
            default: ()=>null
        }
    },
    data() {
        return {
        }
    },
    render(){
        const props = Object.keys(this.$props).reduce((res,key) => {
            res[key] = this[key];
            return res;
        },{});
        const slots = [];
        const onChange =(value)=>{
            this.$emit('input',value);
            this.$listeners.change&&this.$listeners.change();
        }
        if (props['suffix']) {
            slots.push( 
                <a-col flex="50px">
                    <span style="display:inline-block;">{props['suffix']}</span>
                </a-col>
            );
        }
        return (
             <a-row type="flex" gutter={10}>
                <a-col flex="auto">
                    <a-input-number onChange={onChange} {...{ props }} step={ 1 } formatter={formatPrice} parser={parsePrice} style={{ width: "100%" }}/>
                </a-col>
                {slots}
            </a-row>
        )
    }
}
</script>